<template>
	<view>
		<view class="tn-padding-sm">
			<view v-show="total">
				<block v-for="(item, index) in list" :key="index">
					<uni-card class="card" :isFull="true" @click="toDetail(item)">
						<text class="uni-body">
							<view>
								<view v-if="item.isClosed === '0'" class="right-top tn-bg-red">未结案</view>
								<view v-else class="right-top tn-bg-green">已结案</view>
							</view>
							<view>
								<text style="line-height: 2em; color: #3a3a3a" class="label tn-text-xl tn-text-bold">编号：{{ item.caseNo }}</text>
							</view>
							<view>
								<text class="label">
									车牌号：
									<text class="value">{{ item.carProvince }}{{ item.carNo }}</text>
								</text>
							</view>
							<!-- <view>
								<text class="label">
									当事人：
									<text class="value">{{ item.clientName }} {{ item.clientTel }}</text>
								</text>
							</view> -->
							<view>
								<text class="label">
									发生地点：
									<text class="value">{{ item.enquireLoc }}。</text>
								</text>
							</view>
              <view>
                <text class="label">
                  发生时间：
                  <text class="value">{{ item.happentime }}。</text>
                </text>
              </view>
						</text>
					</uni-card>
				</block>
				<view class="tn-margin-sm tn-padding-bottom-sm">
					<uni-pagination :total="total" v-model="query.pageNum" :pageSize="query.pageSize" @change="load"></uni-pagination>
				</view>
			</view>
		</view>

		<view class="add-btn tn-main-gradient-blue tn-shadow-gray" @click="toAdd">
			<view class="tn-icon-add tn-text-xxl" />
		</view>
	</view>
</template>

<script>
import { onMounted } from 'vue';
import { searchDoc } from '@/api/lupeiwenshu.js';

export default {
	data() {
		return {
			query: {
				pageNum: 1,
				pageSize: 10
			},
			total: 0,
			list: []
		};
	},
	onShow() {
		setTimeout(uni.startPullDownRefresh, 500);
	},
	onPullDownRefresh() {
		this.load();
	},
	onUnload() {
		let list = getApp().globalData.apiList;
		try {
			list.values().forEach((item) => item.abort());
		} catch (error) {
			//TODO handle the exception
		}
	},
	onHide() {
		let list = getApp().globalData.apiList;
		try {
			list.values().forEach((item) => item.abort());
		} catch (error) {
			//TODO handle the exception
		}
	},
	methods: {
		load() {
			searchDoc(this.query)
				.then((res) => {
					this.total = res.total;
					this.list = res.rows;
				})
				.finally(() => {
					uni.stopPullDownRefresh();
				});
		},
		toDetail(item) {
			uni.navigateTo({
				url: '/pages/roadCompensation/add/add?id=' + item.id+'&isClosed='+item.isClosed
			});
		},
		toAdd() {
			uni.navigateTo({
				url: '/pages/roadCompensation/zonghexinxi/zonghexinxi?isClosed=0'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.card {
	margin: 0 !important;
	border-radius: 6px;
	margin-top: 15px !important;

	.right-top {
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 6rpx;
		color: white;
		padding: 0 15rpx;
	}

	::v-deep {
		.uni-card__header {
			.uni-card__header-box {
				.uni-card__header-content-title {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

		.title {
			color: #333;
			line-height: 1.5em;
			font-size: 32rpx;
			font-weight: bold;
		}

		view {
			padding: 2px;
			line-height: 2em;
		}

		.value {
			color: $tn-color-gray;
		}
	}
}

.add-btn {
	position: fixed;
	right: 40rpx;
	bottom: 100rpx;
	border-radius: 50%;
	padding: 30rpx;
}

.empty {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
}
</style>
